<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    pageContext.setAttribute("basePath", basePath);
%>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>口腔内窥镜管理</title>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <link href="<%=basePath%>resources/js/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="<%=basePath%>resources/js/jquery-1.9.1.min.js"></script>
    <script src="<%=basePath%>resources/js/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>

    <script>
        $(document).keypress(function (e) {
            if (e.which == 13) {
                toMainPage();
            }
        });
        function toMainPage() {
            var userName = $("#username").val();
            var password = $("#password").val();
            if (userName == "") {
                alert("请输入用户名");
                return;
            }
            if (password == "") {
                alert("请输入密码");
                return;
            }
            $('#formdiv').submit();
        }

        function showMessage() {
            var message = "${message}";
            if (message != null && message != '') {
                alert(message);
            }
            <%
                request.removeAttribute("message");
            %>
            document.getElementById('username').focus();
        }
    </script>
    <style>
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0
        }

        input {
            outline: none;
        }
    </style>
</head>
<body onload="showMessage();" style="width:100%;padding:0;margin:0;height:100%">
<div style="position: relative;width: 100%;height: 100%">
    <img src="<%=basePath%>resources/images/login/index_bg.jpg" style="z-index: -1;width: 100%;height: 100%"/>
    <div style="position:absolute;top:25%;float:right;right:40%;width: auto;text-align:center">
        <form action="weblogin.html" method='post' id='formdiv' style="text-align:center;position:relative">
            <input type="text" name="userName" id="username"
                   style="width:250px;margin:20px;height:30px;border-radius:15px;opacity:0.5;background:#000;color:white;padding-left:25px;" placeholder="请输入用户名"/><br/>
            <span class="glyphicon glyphicon-user" style="position:absolute;top:29px;left:29px;color:#aaa99f"></span>
            <input type="password" name="password" id="password"
                   style="width:250px;height:30px;border-radius:15px;opacity:0.5;background:#000;color:white;padding-left:25px"placeholder="请输入密码"/><br/>
            <c:if test='${message!=null }'>
                ${message }
            </c:if>
            <div style="background:#82c225;width:120px;height: 28px;margin: 10px auto;text-align: center;vertical-align:middle;border-radius:15px; cursor: pointer;" onclick="toMainPage();">
                <p style="font-size: 18px;color: white;">
                    登 录
                </p>
            </div>
        </form>
    </div>

    <div style="text-align: center;position: absolute;bottom:0;padding-top: 5px;z-index:5;width:100%">
        <p style="color: #808080;">
            提示：请在IE8.0及以上版本，分辨率1024×768以上使用！ 版本：V1.0
            <br/>
            Copyright 2016 杭州公司 版权所有
        </p>
    </div>
</div>

<style type="text/css">
    li {
        margin-bottom: 15px;
        font-size: 18px;
    }
</style>
</body>
</html>
